{% extends 'mathtesthome.html' %}
{% load crispy_forms_tags %}
{% block body %}
<div class="main-content container">


    <div class="row">

        <div class="col-sm-8">

            <div class="panel panel-default panel-table">
                <div class="panel-heading">错题详情
                    <div class="tools"><span class="icon s7-edit"></span>
                    </div>
                </div>
                <div class="panel-body">
                    <table class="table">
                        <thead>
                        <tr>
                            <th style="width:30%;">题目</th>
                            <th style="width:40%;">解题过程</th>
                            <th></th>
                            <th></th>

                            <th class="actions"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{{instance.expresstion}}</td>
                            <td> {{ instance.get_markdown|truncatechars_html:120 }}</td>
                            {%if instance.archive %}
                            <td><a href="{%url 'mathtest:mistakearchiverestore' instance.id%}">还原</a></td>
                            {%else%}
                            <td><a href="{%url 'mathtest:mistakearchive' instance.id%}">归档</a></td>
                            {%endif%}
                            <td><a href="{%url 'mathtest:mistakeupdate' instance.id%}">更新</a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

<div class='col-sm-12 '>



    <hr/>
    <br/>

    <div>

        <p class='lead'>Comments</p>
        {% if request.user.is_authenticated %}
        <form method="POST" action="."> {% csrf_token %}
            {{ comment_form|crispy }}
            <input type='submit' value='Post comment' class='btn btn-default'>
        </form>
        {% else %}
        <p>You must login to comment </p>
        {% endif %}
        <hr/>
        {% for comment in comments %}

        <blockquote>
          <p>{{ comment.content }}</p>
          <footer>via {{ comment.user }} | {{ comment.timestamp|timesince }} ago | {% if comment.children.count > 0 %}{{ comment.children.count }} Comment{% if comment.children.count > 1 %}s{% endif %} | {% endif %} <a class='comment-reply-btn' href='#'>回复</a>| <a class='comment-reply-btn' href='#'>展开</a></footer>
          <div class='comment-reply' style="display: none;">
              {% for child_comment in comment.children %}
                <blockquote>
                <p>{{ child_comment.content }}</p>
                <footer>via {{ child_comment.user }} | {{ child_comment.timestamp|timesince }} ago</footer>
                </blockquote>
             {% endfor %}
             {% if request.user.is_authenticated %}
            <form method="POST" action="."> {% csrf_token %}
                {{ comment_form|crispy }}
                <input type='hidden' name='parent_id' value='{{ comment.id }}'>
                <input type='submit' value='Reply' class='btn btn-default'>
            </form>
            {% else %}
        <p>You must login to comment </p>
        {% endif %}
        </div>

        </blockquote>

        <hr/>
        {% endfor %}
    </div>




</div>

        </div>

        <div class="col-sm-4">
            <div class="panel panel-default panel-table">
                <div class="panel-heading panel-heading-divider">
                    题型解析<span class="panel-subtitle">&nbsp;</span>
                    <span class="panel-subtitle">&nbsp;</span>
                </div>
                <div class="panel-body">


                    <div class="form-group row">
                        <label class="col-6 col-sm-6 col-form-label text-sm-right">开心就好</label>
                    </div>

                </div>
            </div>
        </div>
    </div>

</div>


{% endblock %}
{% block extendscript%}
<script>
        $(".comment-reply-btn").click(function(event){
        event.preventDefault();
        $(this).parent().next(".comment-reply").fadeToggle();
    })
</script>
{% endblock %}